<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name=viewport content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1">
		<meta content=yes name="apple-mobile-web-app-capable">
		<meta content=yes name="apple-touch-fullscreen">
		<meta content="telephone=no,email=no" name="format-detection">
		<title></title>
		<link rel="stylesheet" type="text/css" href="./iconfont.css">
		<style>
			body,h1,h2,h3,h4,h5,h6,p,form,ol,ul,div,input,button,img,div{padding:0;margin:0}
			div{font-size:0rem;}
			/*body,html{width:100%;height:100%;}*/
			/*html{font-size:0px;}*/
			/*#inquire{width:100%;height:100%;background:url(img/quireBG.jpg) no-repeat;background-size:100% 100%;}*/
			#inpuire{width:100%;}
			.word1{width:90%;margin:0 auto;padding-top:0.8rem;text-align: center;}
			.word1 img:nth-of-type(1){width:100%;height:100%;}
			.word1 img:nth-of-type(2){width:60%;height:60%;}
			#form{width:100%;margin-top:1rem;}
			form{width:90%;margin:0 auto;text-align: center;}
			.input{background:#F3E162;padding:0.4rem;border-radius:0.1rem;border:1px solid #F3E162;border-radius: 0.1rem;}
			.input>div{width:100%;display: flex;justify-content: center;}
			.input i{width:0.8rem;height:0.8rem;font-size:0.48rem;text-align: center;line-height:0.8rem;flex:1;background:#F5E253;display: block;color:#AA8C2A;border-right:1px solid #AA8C2A;}
			.input input{flex:4;border:none;}
			#submit{
				width:60%;
				margin:0 auto;				
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top:1rem;
			}
			#sub{
				width:4rem;
				height:1rem;
				border:none;
				background:linear-gradient(#EFDBB1,#DAB26E);
				border-radius:0.1rem;
				color:#fff;
				font-size:0.36rem;
				box-shadow:0 0 1rem #646464;
			}
			.notice{display: flex;justify-content: center;width:100%;margin-top:1rem;}
			.notice>div{color:#fff;text-align: justify;width:70%;margin:0 auto;display: flex;flex-direction: column;
				align-items: flex-start;
			}
			h2{font-size:0.40rem;width:100%;text-align: center;}
			.notice p{font-size:0.28rem;}
			.tishi{
				width:100%;
				height:0.6rem;
				background:#ccc;
				color:red;
				line-height: 0.6rem;
				margin:0.3rem 0;
				font-size:0.18rem;
				text-align: center;
				display: none;
				/*position: absolute;*/
			}
		</style>
		<script src="js/rem.js"></script>
	</head>
	<body>
		<div id="inquire">
			<img src="img/header_01.jpg" alt="" style="width:100%;height:100%;"/>
			<div class="word1">
				<img src="img/fyzl_03.jpg" alt="" />
				<img src="img/word_07.png" alt="" />
			</div>
			<p class="tishi"></p>
			<div id="form" >
				<form onsubmit="return a()" action="end.html">
					<div class="input">
						<div class="name"><i class="iconfont icon-ren"></i><input type="text" placeholder=" 姓名"/></div>
						<div class="ID"><i class="iconfont icon-Id"></i><input type="text" placeholder=" 身份证" id="identity"/></div>
					</div>
					<div id="submit"><input type="submit" value="确认提交" id="sub"></input></div>
				</form>
			</div>
			<div class="notice">
					<div>
						<h2>注意事项</h2>
							<p>1.本系统主要用于验证"佛缘之路百印详图"的真伪以及唯一性</p>
							<p>2.请勿将本系统分享给其他用户。</p>
							<p>3.如有任何问题请拨打客服电话:4000000</p>
					</div>
			</div>
			<footer style="position:absolute;bottom:0;"><img src="img/header_01.jpg" alt="" style="width:100%;height:100%;"/></footer>
		</div>
		<script src="js/jquery-1.10.1.min.js"></script>
		<script>

				function a(){
					var Name = $(".name input").val();
					var card = $("#identity").val();
					var reg = /^[\u4E00-\u9FA5]{2,6}$/;
					var pattern = /(^\d{15}$)|(^\d{18}$)|(^\d{17}(\d|X|x)$)/; 
					
					 
					 if(Name.length == 0) {
					 	$(".tishi").show();
					  $(".tishi").html( '名称没有输入');
					  $('.name input').focus();
					  $(".tishi").fadeOut(4000)
							return false;
					 } if(reg.test(Name) === false) {
					 	$(".tishi").show();
					   $(".tishi").html( '名称不合法');
					   $('.name input').focus();
					   $(".tishi").fadeOut(4000)
					   return false;
					  }if(card.length == 0) { 
					  	$(".tishi").show();
					   $(".tishi").html( '身份证号没有输入');
					  $('#identity').focus();
					  $(".tishi").fadeOut(4000)
					  return false;
					 } if(pattern.test(card) === false) {
					 	$(".tishi").show();
					   $(".tishi").html( '身份证号不合法');
					   $('#identity').focus();
					   $(".tishi").fadeOut(4000)
					   return false;
					  }else{
					  	$(".tishi").text() == "";
					  	return true;
					  }
			}
						
				
				
		</script>
	</body>
</html>
